<!DOCTYPE html>
<html>
<head>
	<title>CSS网页布局</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="CSS/style.css">
	<style type="text/css">


	</style>
</head>
<body>
	<div class="header">
		<div class="logo">
			<img src="image/logo.png">
		</div>
		<div class="nav">

			 <ul class="nav">
				<li><a href="#">首页</a></li>
				<li><a href="#">图片</a></li>
				<li><a href="#">视频</a></li>
				<li><a href="#">手记</a></li>
			</ul>

		</div>
	</div>
	<!-- 主体 -->
	<div class="main">
		<div class="top">
			<img src="image/1.jpeg">
		</div>
		<!-- 遮罩层 -->
		<div class="toplayer"></div>
			<!-- 遮罩层上面-->
		<div class="toplayer-top">
			<div class="word">MY BEAUTIFUL LIFE</div>
			<button>LOOK MORE &gt;</button>
		</div>

		<!-- 中间部分 -->
		<div class="middle">
			<div class="m-top">
				<div class="commen weibo">
					<img src="image/weibo.png">
					<div class="comm">MICROBLOG</div>
				</div>
				<div class="commen weixin">
					<img src="image/weixin.png">
					<div class="comm">WECHAT</div>					
				</div>
				<div class="commen QQ">
					<img src="image/QQ.png">
					<div class="comm">QQ</div>
				</div>
				<div class="clear"></div> <!--清除浮动-->

			</div>

			<div class="m-middle">
				"I want to give good things to record down,<br>
				after the recall will be very beautiful."
			</div>

			<div class="m-bottom">
				<div class="m-com">
					<img src="image/03-01.jpg">
					<div class="des1">Cool Image</div>
					<div class="des2">Record The Picture</div>
				</div>
				<div class="m-com">
					<img src="image/03-02.jpg">
					<div class="des1">Cool Image</div>
					<div class="des2">Record The Picture</div>
				</div>
				<div class="m-com">
					<img src="image/03-03.jpg">
					<div class="des1">Cool Image</div>
					<div class="des2">Record The Picture</div>
				</div>

			</div>
			<div class="clear"></div> <!--清除浮动-->
		</div>

		<!-- 中间的底部部分 -->
		<div class="bottom">
			<div class="content">
				<div class="title">FROM THE PHOTO ALBUM</div>
				<div class="picture">
					<dl>
						<dt><img src="image/04-01.jpg"></dt>
						<dd class="word">Life is like a book, just read more and more refined, more write more carefully. When read, mind open, all things have been indifferent to heart. Life is the precipitation.</dd>
					</dl>
					<dl>
						<dt><img src="image/04-02.jpg"></dt>
						<dd class="word">Life is like a cup of tea, let people lead a person to endless aftertastes. You again good taste, it will always have a different taste, different people will have different taste more.</dd>
					</dl>
				</div>
				<div class="clear"></div>
				<div class="clear"></div> <!--清除浮动-->
		</div>

		<!-- 底部 -->
		<div class="footer">
			@2016imooc.com 京ICP备13046642号
		</div>
	</div>

</body>
</html>